<template>
  <div>
    <NavBar>
      <template #default> 购物车 </template>
    </NavBar>

    <ShopCartList />

    <CheckoutBar :shopCartData="cartStore.items" />
  </div>
</template>

<script setup>
import NavBar from "../../components/common/NavBar.vue";
import ShopCartList from "../../components/content/ShopCartList.vue";
import CheckoutBar from "../../components/content/CheckoutBar.vue";
import { onMounted } from "vue"; // Import onMounted to fetch cart data when the component loads
import { useCartStore } from "@/stores/cartStore"; // Import your Pinia Cart Store

// Get an instance of your Pinia store
const cartStore = useCartStore();

// When the component is mounted, fetch the latest cart data from the server.
// This ensures the cart view is always up-to-date with the backend.
onMounted(() => {
  cartStore.fetchCartItems();
});

// --- Removed Local State and Computed Properties ---
// The following variables and computed properties were used for local state management
// and are no longer necessary as cart data and actions are handled by the Pinia store
// and backend API calls.

// // 购物车数据保存在浏览器中 (REMOVED: Data now comes from Pinia/Backend)
// const showCart = JSON.parse(localStorage.getItem('shopCartData'));

// // 选中商品的索引和选中状态 (REMOVED: Managed by Pinia actions)
// const selectProductIndex = ref();
// const selectProductCheck = ref();

// // 加减商品的索引和加减符号 (REMOVED: Managed by Pinia actions)
// const productIndex = ref();
// const productSign = ref();
// const productNumber = ref();

// // 删除商品的索引 (REMOVED: Managed by Pinia actions)
// const deleteProductIndex = ref();

// const changeSelectProduct = computed(() => {
//     return { index: selectProductIndex.value, select: selectProductCheck.value }
// });

// const changeNumber = computed(() => {
//     return { index: productIndex.value, sign: productSign.value, number: productNumber.value }
// });

// const deleteProduct = computed(() => {
//     return deleteProductIndex.value;
// });

// const changeShopCart = (index, checked) => {
//     selectProductIndex.value = index;
//     selectProductCheck.value = checked;
// };

// const changeProductNumber = (index, sign, number) => {
//     productIndex.value = index;
//     productSign.value = sign;
//     productNumber.value = number;
// };

// const deleteGoalProduct = (index) => {
//     deleteProductIndex.value = index;
// }
</script>